<template>
    <div class="address_box">
        <Head :left="true" title="地址列表"></Head>

        <div class="sub-child">
            
            <div class="empty" v-if="list.length?false:true">
                <p>—————— 还没有收货地址 ——————</p>
            </div>
            <van-button class="addaddress" color="#333" @click="gotomodify">新增地址</van-button>
            
            <div class="adrchoice">
                
                <div class="oneaddress" v-for="(v,i) in list" :key="i" @click="choicePerson(v.name)">
                    <h4>收货人:{{v.name}}</h4>
                    <h5>电话:{{v.phone}}</h5>
                    <p>地址:{{v.province}}{{v.city}}{{v.region}}{{v.detail_addr}}</p>
                    <p>邮编:{{v.areaCode}}</p>
                    <van-icon class="delet_it" name="clear" size="23" @click.stop="deleteit(v.name)"/>
                </div>
               
            </div>
            


        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { Notify } from 'vant';
export default {
    data(){
        return{
            list:[],

        }
    },
    methods:{
        gotomodify(){
            this.$router.push({name:'addadd'})
        },
        // onAdd(){
        //     this.$router.push({name:'addadd'}) 
        // }
        choicePerson(name){
            // console.log(name)
            this.$router.push({name:'cash',query:{name:name}})
        },
        deleteit(x){
            // console.log(x)
            this.$ajax.deleteOneAddress({
                name:x,
                mobile:localStorage.getItem('mobile')
            }).then(res=>{
                if(res.code==200){
                     this.$ajax.getAddress().then(res=>{
                            this.list=res.result
                        })
                    Notify({ type: 'success', message: res.msg });
                }else{
                   Notify({ type: 'warning', message: res.msg });
                }
            })
        },
    },
    mounted(){
        if(localStorage.getItem('mobile')){
            this.$ajax.getAddress({
                mobile:localStorage.getItem('mobile')
            }).then(res=>{
                this.list=res.result
            })
        }
    },
}
</script>


<style lang="scss" >
.adrchoice{
    padding: 13px;
    .oneaddress{
        background-color: #fff;
        width: 100%;
        border-radius: 5px;
        padding: 13px;
        box-sizing: border-box;
        margin-bottom: 13px;
        position: relative;
        h4{
            font-weight: bold;
            font-size: 15px;

        }
        h5{
            font-size: 14px;
            padding-top: 5px;
        }
        p{
            font-size: 13px;
        }
        .delet_it{
            position: absolute;
            top: 13px;
            right: 13px;
        }
    }

}
.address_box{
     .empty{
        p{
        width: 100%;
        text-align: center;
        padding-top: 100px;
        font-size: 15px;
        color: #999;
        }
        
    }
    .addaddress{
        position: fixed;
        bottom: 5px;
        width: 85%;
        height: 40px;
        margin-left: 50%;
        transform: translateX(-50%);
    }
}
   
</style>